<template>
     <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">


  <el-col :span="12"   class="guahao"><template>
    <el-table
     stripe
      :data="arr"
      style="width: 100%">
      <el-table-column
        prop="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="iphone"
        label="患者手机号"
        width="80">
      </el-table-column>
        <el-table-column
        prop="guahao"
        label="挂号科室"
        width="80">
      </el-table-column>
        <el-table-column
        prop="money"
        label="挂号费"
        width="80">
      </el-table-column>
        <el-table-column
        prop="time"
        label="挂号时间"
        width="80">
      </el-table-column>
    </el-table>
  </template></el-col>



  <el-col :span="12"><div class="grid-content bg-purple">
    <el-col :span="12" class="yisheng"> <el-table
      :data="arr2"
      style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column
        prop="ids"
        label="排名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="username"
        label="科室"
        width="80">
      </el-table-column>
      <el-table-column
        prop="money"
        label="挂号量">
      </el-table-column>
    </el-table></el-col>
    <el-col :span="12" class="yisheng"> <el-table
      :data="arr2"
      style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column
        prop="ids"
        label="排名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="money"
        label="挂号量"
          width="80">
      </el-table-column>
    </el-table></el-col>
    
    
    </div></el-col>

</el-row>

</template>

<script>
import busEvent from '../../utils/busEvent';

import {gethomeData} from '../../api/footer'
export default {
   mounted() {
   this.getLocalHost()
   
  },
data(){ 
  return{ 
    arr:[
    
    ]
  }
},
computed:{
  arr2(){
    return this.arr.slice(0,21)
  },
  
  
},
methods:{
  getLocalHost() {
     var params={ search: '' ,page:1,pageSize:15}
      gethomeData(params).then((res) => {
     
        if (res.code == 200) {
         
          this.arr = res.data;
        
        }
      });

   
    },
  
 tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }}


}
</script>

<style scoped lang="less">
  .el-table>.warning-row {
    background: rgb(227, 134, 100);
  }

  .el-table>.success-row {
    background: #75e08c;
  }
.el-header{ 
   text-align: start;
   background:  #ffffff;
   font-size: 24px;
   font-weight: 600;
}
  .el-row {
    margin-top:20px;
     border-radius: 4px;
    margin-bottom: 20px;
    &:last-child {
    
      margin-bottom: 0;
    }
  }
  .el-row >.guahao{ 
  background: #ffffff;
 border-radius: 4px;
  padding-top: 20px;
  }

  /deep/.yisheng{

      background: #ffffff;
  }
  .el-col {
    
    border-radius: 4px;
  }
.el-main{ 
line-height: 35px;
}
</style>